<template>
  <div class="box" style="overflow: hidden">
    <OrderInformation :orderNumber="orderNumber"></OrderInformation>
    <!-- <el-row v-if="showButton && showOrderRev"      改成放给审件专员查看之前的代码!> -->
    <el-row v-if="reviewer == 1">
      <el-col :span="24">
        <span style="float: right"
          ><el-button type="primary" @click="showDia"
            >修改录入信息</el-button
          ></span
        >
      </el-col>
    </el-row>
    <div class="enterInfor">
      <table>
        <tr>
          <td rowspan="5" width="8%" class="left">客户信息</td>
          <td width="8%" class="title">借款人姓名</td>
          <td width="14%">{{ showForm.basicBorrowerName }}</td>
          <td width="8%" class="title">身份证号码</td>
          <td width="14%">{{ showForm.basicBorrowerCard }}</td>
          <td width="8%" class="title">联系电话</td>
          <td width="14%">{{ showForm.basicBorrowerPhone }}</td>
          <td width="8%" class="title">现住地址</td>
          <td>{{ showForm.basicBorrowerAddress }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">工作单位</td>
          <td width="14%">{{ showForm.basicBorrowerWork }}</td>
          <td width="8%" class="title">婚姻状况</td>
          <td width="14%">{{ showForm.basicBorrowerMarriage }}</td>
          <td width="8%" class="title">是否有涉诉</td>
          <td width="14%">{{ litigation }}</td>
          <td class="title">档案编码</td>
          <td>{{ showForm.fileCoding }}</td>
        </tr>
        <tr>
          <td width="8%" class="title" v-if="prductId != 3">签约类型</td>
          <td width="14%" v-if="prductId != 3">
            <span v-if="showForm.signType == 0">1类</span>
            <span v-if="showForm.signType == 1">2类</span>
          </td>
          <td width="8%" class="title" v-if="prductId != 3">借款人资质</td>
          <td width="14% " v-if="prductId != 3">
            {{ qualification }}
          </td>
        </tr>

        <tr v-if="showForm.basicBorrowerMateName">
          <td width="8%" class="title">配偶姓名</td>
          <td width="14%">{{ showForm.basicBorrowerMateName }}</td>
          <td width="8%" class="title">身份证号码</td>
          <td width="14%">{{ showForm.basicBorrowerMateCard }}</td>
          <td width="8%" class="title">联系电话</td>
          <td width="14%">{{ showForm.basicBorrowerMatePhone }}</td>
          <td width="8%" class="title">现住地址</td>
          <td width="14%">{{ showForm.basicBorrowerMateAddress }}</td>
        </tr>
        <tr v-if="showForm.basicBorrowerMateName">
          <td width="8%" class="title">工作单位</td>
          <td>{{ showForm.basicBorrowerMateWork }}</td>
        </tr>
      </table>

      <table>
        <tr>
          <td rowspan="7" width="8%" class="left">不动产信息</td>
          <td width="8%" class="title">抵押人姓名</td>
          <td width="14%">{{ showForm.pledgeName }}</td>
          <td width="8%" class="title">身份证号码</td>
          <td width="14%">{{ showForm.pledgeCard }}</td>
          <td width="8%" class="title">联系电话</td>
          <td width="14%">{{ showForm.pledgePhone }}</td>
          <td width="8%" class="title">抵押共有人</td>
          <td>{{ showForm.pledgeMateName }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">身份证号码</td>
          <td width="14%">{{ showForm.pledgeMateCard }}</td>
          <td width="8%" class="title">联系电话</td>
          <td width="14%">{{ showForm.pledgeMatePhone }}</td>
          <td width="8%" class="title">抵押物地址</td>
          <td width="14%">{{ showForm.pledgeHouseAddress }}</td>
          <td width="8%" class="title">所属区域</td>
          <td v-if="showForm.pledgeHouseDistrict" width="14%">
            {{ showForm.pledgeHouseDistrict }}
          </td>
          <td v-else width="14%">
            {{ showForm.provinceName }}{{ showForm.cityName
            }}{{ showForm.areaName }}
          </td>
        </tr>
        <tr>
          <td width="8%" class="title">小区名字</td>
          <td width="14%">{{ showForm.pledgeHouseName }}</td>
          <td width="8%" class="title">房屋类型</td>
          <td width="14%">{{ showForm.pledgeHouseType }}</td>
          <td width="8%" class="title">建筑面积(m²)</td>
          <td width="14%">{{ showForm.pledgeHouseArea }}</td>
          <td width="8%" class="title">房屋初评(万元)</td>
          <td width="14%">{{ showForm.pledgePreliminaryMoney }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">一抵抵押银行</td>
          <td>{{ showForm.pledgeOneBank }}</td>
          <td width="8%" class="title">一抵抵押余额(万元)</td>
          <td>{{ showForm.pledgeOneBalance }}</td>
          <td width="8%" class="title">本次申请金额(万元)</td>
          <td>{{ showForm.basicLoansMoney }}</td>
          <td width="8%" class="title">本次申请期限(期)</td>
          <td>{{ showForm.basicLoansMonths }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">本次申请产品</td>
          <td>{{ productProperty }}</td>
          <td width="8%" class="title">土地性质</td>
          <td>{{ showForm.landNature }}</td>
          <td width="8%" class="title">产权证号</td>
          <td>{{ showForm.pledgeHouseNumber }}</td>
          <td width="8%" class="title">不动产单元号</td>
          <td>{{ showForm.estateUnit }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">房屋结构</td>
          <td>{{ showForm.houseStructure }}</td>
          <td width="150" class="title">评估价格(万元)</td>
          <td>{{ showForm.evaluationPrice }}</td>
          <td width="150" class="title">装修情况</td>
          <td>{{ showForm.renovation }}</td>
          <td width="150" class="title">本次顺位抵押</td>
          <td>{{showForm.orderedPledge==null?'':showForm.orderedPledge==1?'二抵':'一抵'}}</td>
        </tr>
      </table>

      <table v-if="showForm.pledgeHouseAddressTwo">
        <tr>
          <td rowspan="4" width="8%" class="left">不动产信息</td>
          <td width="8%" class="title">抵押物地址</td>
          <td width="14%">{{ showForm.pledgeHouseAddressTwo }}</td>
          <td width="8%" class="title">所属区域</td>
          <td width="14%">
            {{ showForm.provinceTwoName }}{{ showForm.cityTwoName
            }}{{ showForm.areaTwoName }}
          </td>
          <td width="8%" class="title">小区名字</td>
          <td width="14%">{{ showForm.pledgeHouseNameTwo }}</td>
          <td width="8%" class="title">房屋类型</td>
          <td>{{ showForm.pledgeHouseTypeTwo }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">建筑面积(m²)</td>
          <td>{{ showForm.pledgeHouseAreaTwo }}</td>
          <td width="8%" class="title">房屋初评(万元)</td>
          <td>{{ showForm.pledgePreliminaryMoneyTwo }}</td>
          <td width="8%" class="title">一抵抵押银行</td>
          <td>{{ showForm.pledgeOneBankTwo }}</td>
          <td width="8%" class="title">一抵抵押余额(万元)</td>
          <td>{{ showForm.pledgeOneBalanceTwo }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">土地性质</td>
          <td>{{ showForm.landNatureTwo }}</td>
          <td width="8%" class="title">产权证号</td>
          <td>{{ showForm.pledgeHouseNumberTwo }}</td>
          <td width="8%" class="title">不动产单元号</td>
          <td>{{ showForm.estateUnitTwo }}</td>
          <td width="8%" class="title">房屋结构</td>
          <td>{{ showForm.houseStructureTwo }}</td>
        </tr>
      </table>
    </div>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
    >
      <Information
        :switchButton="dialogVisible"
        ref="Information"
        width="33.3%"
        :formData="showForm"
      ></Information>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderTable,
  updateOrderForm,
  getJobStates,
} from "../../../src/assets/js/api";
import Information from "./Information";
import OrderInformation from "./OrderInformation";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "InformationsViewer",
  components: { OrderInformation, Information },
  props: ["orderNumber", "showButton"],
  data() {
    return {
      reviewer: null, //判断是否是审件专员!
      form: null,
      productId: null,
      dialogVisible: false,
      registerUrl: "/business/order/updateForm",
      orderStatus: "",
      showForm: {},
      golbalPermissions: [],
      qualification: "", //借款人资质!
      productProperty: "", //产品属性!
      prductId: "",
    };
  },
  created() {
    this.reviewer = sessionStorage.getItem("reviewer");
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.prductId = sessionStorage.getItem("prductId");

    //根据订单号查询订单信息
    this.getOrderTable(this.orderNumber);
  },
  computed: {
    //修改按钮
    showOrderRev: function () {
      return checkPermiss("business:order:updateForm", this.golbalPermissions);
    },
    // 是否涉诉！
    litigation: function () {
      if (this.showForm.litigation == "0") {
        return "是";
      } else if (this.showForm.litigation == "1") {
        return "否";
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.prductId = sessionStorage.getItem("prductId");
  },
  methods: {
    //根据订单号查询表格信息
    async getOrderTable(orderId) {
      await getOrderTable(orderId).then((res) => {
        this.showForm = JSON.parse(JSON.stringify(res.data));
      });
      //借款人资质!
      getJobStates("qualification").then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (this.showForm.qualification == res.data[i].itemText) {
            this.qualification = res.data[i].itemValue;
            break;
          }
        }
      });
      // 产品属性!
      getJobStates("product_property").then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (this.showForm.productProperty == res.data[i].itemText) {
            this.productProperty = res.data[i].itemValue;
            break;
          }
        }
      });
    },
    //打开弹窗
    showDia() {
      this.dialogVisible = true;
    },
    //
    //弹框确认按钮
    submit() {
      let thisObj = this;
      let bStop = true;
      let formData = this.$refs.Information.form;
      bStop = this.checkForm();
      //获取自定义表单
      if (bStop) {
        // formData.evaluationPrice = Number(formData.evaluationPrice);
        // formData.pledgePreliminaryMoney = Number(formData.pledgePreliminaryMoney);
        // formData.pledgePhone = Number(formData.pledgePhone);
        // formData.pledgePreliminaryMoneyTwo = Number(formData.pledgePreliminaryMoneyTwo);
        // formData.pledgeHouseArea = Number(formData.pledgeHouseArea);
        // formData.basicLoansMoney = Number(formData.basicLoansMoney);
        // formData.basicLoansMonths = Number(formData.basicLoansMonths);
        updateOrderForm(formData).then((res) => {
          if (res.code == 200) {
            thisObj.$message.success("修改成功");
            thisObj.getOrderTable(thisObj.orderNumber);
            this.dialogVisible = false;
          }
        });
      }
    },
    //验证格式
    checkForm() {
      //子组件的表格
      this.$refs.Information.validateForm();
      let isValid = this.$refs.Information.isValid;
      if (!isValid) {
        this.$message({
          message: "请完成基础信息的非空填写",
          type: "error",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped type="less">
.box
{
    width: 100%;  height: auto;
}
.el-col
{
    text-align: left;
}
.el-row
{
    padding: 10px 0;  text-align: center;
}
.el-button
{
    line-height: 5px;  height: 30px;
}
.elDia ::v-deep .el-dialog
{
    position: absolute;  top: 50%;  left: 50%;  width: 60% !important;  margin-top: unset !important;  transform: translate(-50%, -50%);
}
.enterInfor table
{
    width: 100%;  margin-bottom: 10px;  word-break: break-all;
}
.enterInfor table
{
    table-layout: fixed;  border-collapse: collapse;  border: none;
}
.enterInfor table td
{
    font-size: 14px;  padding: 5px 0;  padding-left: 10px;  text-align: left;  color: #333;  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner
{
    width: 210px;
}
.enterInfor .left
{
    font-size: 14px;  font-weight: bold;  padding: unset;  text-align: center;  color: rgba(51, 51, 51, 1);
}
.enterInfor .title
{
    background: rgba(59, 157, 248, .06);
}








</style>
